<template>
  <div>
    <pt-search :params="params" :config="config" :area="true" label-width="110px" @search="search"/>
    <el-row class="row-item">
      <el-button size="mini" @click="openDialog">上传app</el-button>
    </el-row>
    <pt-table
      :params="params"
      :columns="columns"
      :dataSource="tableData"
      :options="options"
      :fetch="getTableList"
      :pagination="pagination"
    />
    <el-dialog title="上传app" v-dialogDrag :visible.sync="dialogTableVisible" width="800px">
      <apk-upload :upParams="upParams" @upText="upText"/>
      <pt-tableLoading v-show="saveLoading"/>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/api/company";
import apkUpload from "./components/apkUpload.vue";
export default {
  components: { apkUpload },
  data() {
    return {
      columns: [ // 表单配置
        { prop: "agentName", label: "区域", minWidth: 100, align: "left" },
        { prop: "packageName", label: "版本号", minWidth: 120, align: "left" },
        {
          label: "app类型", minWidth: 100, align: "left",
          render: row => {
            return (
              <span>
                {row.packageType == "1" ? "用户端" : row.packageType == "2" ? "商家端"
                  : row.packageType == "3" ? "骑手端" : row.packageType == "4"  ? "商家pc端" : ""}
              </span>
            );
          }
        },
        { label: "安装环境", minWidth: 100, align: "left",
          render: row => {
            return (
              <span>
                {row.packageType == "4" ? "电脑pc" : row.type == "1" ? "安卓"  : row.type == "2"  ? "ios" : ""}
              </span>
            );
          }
        },
        { prop: "modifyContent", label: "修改内容", minWidth: 200, align: "left" },
        { button: true, label: "操作", width: 60, fixed: 'right',
          group: [
            {
              name: "下载", type: "text", onClick: row => {
                // 不写箭头 this 代表group对象
                this.handleClick(row.downloadLink);
              }
            }
          ]
        }
      ],
      pagination: { total: 0, page: 0, size: 10, curPage: 1 }, // 分页
      options: { // 表单外观
        mutiSelect: false, //  多选则 mutiSelect
        index: false, // 显示序号
        loading: false, // 表格动画
        initTable: true // 是否一挂载就加载数据
      },
      tableData: [], //表单数据
      curOrderlist: {}, //修改 选择数据
      config: [
        { key: "agentIds", type: "agentList", area: true, label: "区域" },
        { key: "packageName", type: "input", label: "版本号", placeholder: "请输入版本号" },
        { key: "packageType", type: "select", label: "app类型",
          option: [
            { label: "用户端", id: "1" },
            { label: "商家端", id: "2" },
            { label: "骑手端", id: "3" },
            { label: "商家pc端", id: "4" }
          ]
        },
        { key: 'type', type: 'select', label: '设备类型', option: [{ label: '安卓', id: '1' }, { label: "ios", id: "2" }] },
        { key: "page", type: "button", group: [
            { name: '查询', type: 'primary', onClick: () => this.search() },
            { name: '重置', type: 'info', onClick: () => this.reset() }
          ]
        }
      ],
      params: { // 查询参数
        page: 0,
        size: 10,
        agentIds: [], //区域
        packageName: '', // 包名
        packageType: '', // app类型
        type: '' // 设备类型
      },
      upParams: { // 上传参数
        agentId: '', //区域
        packageName: '', // 包名
        packageType: '', // app类型
        type: '', // 设备类型
        modifyContent: '', // 修改内容
        iosLink: '', // ios下载链接
        adrLink: '' // 安卓apk
      },
      dialogTableVisible: false, // 上传弹窗
      saveLoading: false // 上传等
    };
  },

  methods: {
    search() {
      // 搜索
      this.pagination.curPage = 1
      this.pagination.page = 0
      this.getTableList()
    },
    reset() {
      // 重置
      this.pagination.curPage = 1;
      for (const key in this.params) {
        if (key === "page") {
          this.pagination.page = 0
        } else if (key === "size") {
          this.pagination.size = 10
        } else if (key === "agentIds") {
          this.params[key] = [];
        } else {
          this.params[key] = ""
        }
      }
      this.getTableList()
    },
    handleClick(url) {
      location.href = url
    },
    upText() { // 上传文件
      this.saveLoading = true
      const params = { ...this.upParams }
      if (params.packageType == '4') {
        params.type = '1'
        params.downloadLink = params.adrLink
      } else {
        if (params.type === "1") params.downloadLink = params.adrLink;
        if (params.type === "2") params.downloadLink = params.iosLink;
      }
      delete params.adrLink
      delete params.iosLink
      api.upLoadApp(params).then(res => {
        if (res.success) {
          this.dialogTableVisible = false
          this.getTableList()
        }
      }).finally(() => { this.saveLoading = false })
    },
    getTableList() { // 获取列表
      const params = { ...this.params }
      params.agentIds = params.agentIds.length ? params.agentIds.join(",") : ""
      params.page = this.pagination.page
      params.size = this.pagination.size
      this.options.loading = true
      api.appList(params).then(res => {
        if (res.success) {
          this.tableData = res.data.list
          this.pagination.total = res.data.total
        }
      }).finally(() => { this.options.loading = false })
    },
    openDialog() {// 打开弹窗
      this.dialogTableVisible = true
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.row-item {
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;
}
</style>
